<template>
  <div class="operation">
    <van-swipe @change="onChange">
      <van-swipe-item :key="index" v-for="(item, index) in bannerList"
        ><img width="100%" height="180px" :src="item.image | imgPaths"
      /></van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{ bannerList.length }}</div>
      </template>
    </van-swipe>
    <van-cell class="content">
      <div class="col-333333 font-bold-500 font-16">{{ objContent.name }}</div>
      <div class="col-999999 font-12" v-html="objContent.details"></div>
    </van-cell>
  </div>
</template>
<script>
import { Swipe, SwipeItem, Cell } from 'vant'
import dayjs from 'dayjs'
import { getValue } from '../../utils/auth'
export default {
  name: 'jobPlacement',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Cell.name]: Cell
  },
  data() {
    return {
      current: 0,
      bannerList: [],
      objContent: {}
    }
  },
  created() {},
  mounted() {
    this.objContent = JSON.parse(getValue('bzDetails'))
    this.bannerList = JSON.parse(getValue('bzDetails')).images
  },
  methods: {
    onChange(index) {
      this.current = index
    }
  }
}
</script>
<style lang="scss" scoped>
.font-16 {
  border-bottom: 1px #eee solid;
  padding: 10px 0;
}
.content {
  padding: 10px;
}
.operation {
  background-color: #fff;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.font-12 {
  margin-top: 15px;
}
</style>
